import 'package:flutter/material.dart';
import 'constants.dart';
import '../model/conversation.dart';


enum Device {
  MAC, WIN
}

class _ConversationItem extends StatelessWidget {

  _ConversationItem({Key key, this.conversation})
      : assert(conversation != null),
        super(key: key);

  final Conversation conversation;

  @override
  Widget build(BuildContext context) {

    /// 根据图片的获取方式初始化头像组件
    Widget avatar;
    if (conversation.isAvatarFromNetwork()){
        avatar = Image.network(
        conversation.avatar,
        width: Constants.ConversationAvatarSize,
        height: Constants.ConversationAvatarSize,
      );
    } else {
      avatar = Image.asset(
        conversation.avatar,
        width: Constants.ConversationAvatarSize,
        height: Constants.ConversationAvatarSize,
      );
    }

    Widget avatarContainer;
    /// 未读消息角标
    if (conversation.unreadMsgCount > 0) {
      /// 未读消息角标
      Widget unreadMsgCountText = Container(
        width: Constants.ConversationUnReadMsgNotifyDotSize,
        height: Constants.ConversationUnReadMsgNotifyDotSize,
        alignment: Alignment.center,
        /// 设置圆角 装饰器
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(Constants.ConversationUnReadMsgNotifyDotSize / 2.0),
            color: Color(AppColors.ConversationNotifyDotBgColor),
        ),

        /// 内容
        child: Text(
          conversation.unreadMsgCount.toString(),
          style: AppStyle.UnreadMsgCountDotStyle,
        ),
      );


      /// 堆栈式布局 绝对布局
      /// 先添加头像 后添加99 后面覆盖在前面
      avatarContainer = Stack(

        /// 超出显示区域还是可以显示可见
        overflow: Overflow.visible,
        children: <Widget>[
          avatar,
//        unreadMsgCountText
          /// 角标右上角
          Positioned(
            right: -6.0,
            top: -6.0,
            child: unreadMsgCountText,
          ),
        ],
      );

    } else {
      avatarContainer = avatar;
    }

    /// 判断勿扰图片
    var _rightArea = <Widget>[
      Text(conversation.updateAt, style: AppStyle.DesStyle),
      /// 设置间距
      Container(width: 10.0),
    ];

    /// 如果有勿扰模式，就添加图片组件
    if (conversation.isMute) {
      _rightArea.add(
        Icon(IconData(
          0xe755,
          fontFamily: Constants.IconFontFamily
        ),
        color: Color(AppColors.ConversationMuteIcon),
        size: Constants.ConversationMuteIconSize)
      );
    } else {
      _rightArea.add(
          Icon(IconData(
              0xe755,
              fontFamily: Constants.IconFontFamily
          ),
              /// 设置透明
              color: Colors.transparent,
              size: Constants.ConversationMuteIconSize)
      );
    }


    return Container(

      /// *** 声明了decoration 就不能设置color
      decoration: BoxDecoration(
        color: Color(AppColors.ConversationItemBgColor),
        border: Border(
          bottom: BorderSide(
            color: Color(AppColors.ConversationDividerColor),
            width: Constants.ConversationDividerWidth,
          ),
        ),
      ),
      padding: const EdgeInsets.all(10.0),
//      color: Color(AppColors.ConversationItemBgColor),

      child: Row(

        crossAxisAlignment: CrossAxisAlignment.center,
        /// 每一行放xxx元素
        children: <Widget>[

          /// 图片头像
          avatarContainer,

          /// 图片和文字间隔
          Container(width: 10),

          /// 默认其他元素先布局，剩下的元素直接填充
          Expanded(
            child: Column(
              /// 布局从开始位置 应该是左侧 交叉轴
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(conversation.title, style: AppStyle.TitleStyle),
                Text(conversation.des, style: AppStyle.DesStyle),
              ],
            ),
          ),

          Container(width: 10),

          Column(
            children: _rightArea,
          ),

        ],
      ),
    );
  }
}


class ConversationPage extends StatefulWidget {
  @override
  _ConversationPageState createState() => _ConversationPageState();
}


class _DeviceInfoItem extends StatelessWidget {

  /// 构造方法
  const _DeviceInfoItem({
    this.device : Device.WIN
  }) :
        assert(device != null) ;

  final Device device;

  int get iconName {
    return device == Device.WIN ? 0xe75e : 0xe640;
  }

  String get deviceName {
    return device == Device.WIN ? 'Windows' : 'Mac';
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      
      padding: EdgeInsets.only(left: 24.0, top: 10.0, right: 24.0, bottom: 10.0),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: Constants.ConversationDividerWidth,
            color: Color(AppColors.ConversationDividerColor)
          ),
        ),
        color:Color(AppColors.DeviceInfoItemBgColor),
      ),
      
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Icon(IconData(
            this.iconName,
            fontFamily: Constants.IconFontFamily,
          ), size: 24.0, color: Color(AppColors.DeviceInfoItemIconColor)),
          SizedBox(width: 16.0),
          Text('$deviceName 微信已登录，手机通知关闭', style: AppStyle.DeviceInfoItemTextStyle)
        ],
      ),
    );
  }
}



class _ConversationPageState extends State<ConversationPage> {

  final ConversationPageData data = ConversationPageData.mock();

  @override
  Widget build(BuildContext context) {

    var mockConversations = data.conversations;
    return Container(

      child: ListView.builder(

        itemBuilder: (BuildContext context, int index){

          if (data.device != null) {
            if (index == 0) {
              return _DeviceInfoItem(device: data.device);
            }
            return _ConversationItem(conversation: mockConversations[index-1]);
          } else {
            return _ConversationItem(conversation: mockConversations[index]);
          }
        },

        itemCount: mockConversations.length + 1,
      ),
    );
  }
}
